import React from 'react';
import {Table, Row, Col, Form, Button, Popconfirm} from 'antd';
const R = require('ramda');
import EditRecAcc from './EditRecAcc';
import RightBox from "../../commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
import Constants from "../../../utils/Constants";
const FormItem = Form.Item;

export default Form.create({wrappedComponentRef: true})(class Recacc extends React.Component {
    constructor(props) {
        super(props);
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }

    handleOpenAdd = () => {
        this.editRecAcc.handleOpen("add");
    }


    onEdit = (record, type) => {
        this.props.dispatch({type: 'logisticsSupplier/getSupplierPayeeById', payload: {id: record.id}});
        this.editRecAcc.handleOpen(type);
    };

    columns = [
        {title: '收款人名称', dataIndex: 'payeename', key: 'payeename'},
        {title: '开户银行', dataIndex: 'bankName', key: 'bankName'},
        {title: '收款人账号', dataIndex: 'payeeno', key: 'payeeno'},
        {title: '创建人', dataIndex: 'creatorName', key: 'creatorName'},
        {title: '创建时间', dataIndex: 'createtime', key: 'createtime'},
        {title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                return (
                    <span>

                        {this.props.disabled == true ?
                            <span>
                                 <a href="#" onClick={this.onEdit.bind(this, record, "view")}>查看</a>
                            </span>
                            :
                            <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_RECACC_DELETE}><span>
                                <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'}
                                 onConfirm={() => {
                                    this.props.dispatch({
                                             type: 'logisticsSupplier/deleteSupplierPayeeById',
                                             payload: {
                                                 id: record.id,
                                                 onSuccess: ()=>{
                                                     this.props.dispatch({
                                                         type: "logisticsSupplier/getPayeeListForPage",
                                                         payload: {
                                                             supplierid: this.props.supplierid,
                                                             page: Constants.DEFAULT_PAGE
                                                         }
                                                     })
                                                 }
                                             }
                                         })
                                    }} okText="是" cancelText="否">
                                    <a href="#" disabled={this.props.disabled}>删除</a>
                                </Popconfirm>
                            </span></RightBox>
                        }
                    </span>
                );
            }
        }];

    render() {
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.recAccPage.size,
            total: this.props.recAccPage.totalRow,
            showSizeChanger: true,
            current: this.props.recAccPage.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.recAccPage;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'logisticsSupplier/getPayeeListForPage',
                    payload: {
                        page: newPage,
                        supplierid: this.props.supplierid
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.recAccPage;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'logisticsSupplier/getPayeeListForPage',
                    payload: {
                        page: newPage,
                        supplierid: this.props.supplierid
                    }
                });
            }
        }

        return (
            <div>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem>
                                <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_RECACC_ADD}>
                                    <Button type="primary" icon="plus" size={'default'} disabled={this.props.disabled} onClick={this.handleOpenAdd.bind(this)}>增加收款人账户</Button>
                                </RightBox>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Table rowKey="id" dataSource={this.props.recAccList} columns={this.columns} bordered={true} size={'middle'}
                        pagination={pagination}
                       scroll={{x:true}}/>

                <EditRecAcc wrappedComponentRef={(inst) => this.editRecAcc = inst}
                            dispatch={this.props.dispatch}
                            dataSource={this.props.dataSource}
                            supplierid={this.props.supplierid}/>

            </div>
        )
    }
})


// WEBPACK FOOTER //
// ./public/src/components/supplier/components/Recacc.js